
<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
    请按日期查询:
    <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker
      v-model="reform.revenue_date"
      type="date"
      placeholder="选择日期"
      value-format="yyyy-MM-dd"
      :picker-options="pickerOptions"
      >
    </el-date-picker>
      <el-form-item>
     <el-button
          type="primary"
          @click="research()"
          v-model="revselbtn" v-if="revselshow"
          >查询</el-button
        >
        </el-form-item>
  </div>
    
    </el-form>
  
    <el-table
      ref="multipleTable"
      :data="pageInfo.list"
      tooltip-effect="dark"
      style="width: 540px; margin: 0px auto"
      @selection-change="handleSelectionChange"
      >
      <el-table-column type="selection" width="55" prop="staff_id" align="center">
      </el-table-column>

      <el-table-column prop="revenue_id" label="编号" width="120" align="center">
      </el-table-column>
      <el-table-column prop="revenue_sum" label="金额" width="120" align="center">
      </el-table-column>
      <el-table-column prop="revenue_date" label="日期" width="240" align="center">
      </el-table-column>
   
    </el-table>

    <br /><br />
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[2, 5, 10]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
     <br><br>
    <el-form ref="form" label-width="80px" style="width: 500px; margin-left:550px">
      <div>
        <el-form-item label="起始时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="record_in_date"
            type="datetime"
            placeholder="选择日期"
            style="width: 100%"
            value-format="yyyy-MM-dd hh:mm:ss"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="record_out_date"
            type="datetime"
            placeholder="选择日期"
            style="width: 100%"
            value-format="yyyy-MM-dd hh:mm:ss"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item style="margin-left:50px">
          <el-button type="primary" @click="money" v-model="revaddbtn" v-if="revaddshow">计算金额</el-button>
        </el-form-item>
        <el-form-item label="营收总计" style="margin-left:50px">
          <el-input
            v-model="i"
            type="staff_password"   
          ></el-input>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
    pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
      },    
      revaddbtn:'52',
      revselbtn:'53',
      revaddshow:false,
      revseelshow:false,
      pageInfo: {},
      currentPage: 1,
      pageSize: 3,
      keyword: "",  
      formLabelWidth: "150px",           
      revenuelist:[], 
      reform:{
        revenue_id:'',
        revenue_sum:'',
        revenue_date:''
      },
      record_in_date:"",
      record_out_date:"",
      i:""
    };
  },
  methods: {
    loadData() {
      this.$axios
        .get("/revenue", {
          params: {
            currentPage: this.currentPage,
            pageSize: this.pageSize,
          },
        })
        .then((res) => {
          this.pageInfo = res.data.data;
             setTimeout(() => {
      //设置默认选中项
        this.login();
      }, 0);          
        })
        .catch((error) => {});
    },
    //val:array,代表的是选中所有行的数据
    handleSelectionChange(val) {
      var ids = []; //存放选中的id
      for (let item of val) {
        ids.push(item.revenue_id);
      }
      //将选中的所有项的id放到数据模型中
      this.ids = ids;

      console.log(ids);
      //this.multipleSelection = val;
    },
    //val：每页的条目数
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.loadData();
      console.log(`每页 ${val} 条`);
    },
    //val:当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadData();
      console.log(`当前页: ${val}`);
    },
    research() {
       this.$axios
        .get("/revenue/date", {
          params: {
             
           revenue_date:this.reform.revenue_date
          },
        })
        .then((res) => {
          this.pageInfo =res.data.data;
        })
        .catch((error) => {});
    },
    money(){
      this.$axios.post("/selSum",{
        record_in_date:this.record_in_date,
        record_out_date:this.record_out_date
      }).then(res=>{
        if(res.data.status == 1000){
          this.i=res.data.data
        }

      }).catch(error=>{});
    },
    login(){
      var l = sessionStorage.getItem("permission_list");
      var list = l.split(',');
      list.forEach((item)=>{
        if(item == this.revaddbtn){
          this.revaddshow = true;
        }
        if(item == this.revselbtn){
          this.revselshow = true;
        }
      })
    }
  },
  mounted() {
    this.loadData();
  },
};
</script>

<style>

</style>

